'use client'
import { Loader } from 'lucide-react'
import { motion } from 'framer-motion'

export default function Loading() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[var(--facet-sidebar)] to-[var(--facet-chat-bg)]">
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="flex flex-col items-center"
      >
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ repeat: Infinity, duration: 1, ease: "linear" }}
          className="mb-6"
        >
          <Loader size={64} className="text-[var(--facet-blue-primary)]" />
        </motion.div>
        <h2 className="text-2xl font-bold text-[var(--foreground)] mb-2 font-[var(--font-playfair)]">Loading...</h2>
        <p className="text-[var(--muted-foreground)] font-[var(--font-inter)]">Please wait while we prepare your personalized experience</p>
      </motion.div>
    </div>
  )
}